<template>
  <div>
    <div class="pageheader">
      <XHeader :left-options="{backText:''}" :title="xheader.title" class="XHeader"></XHeader>
    </div>
    <div class="page">
      <!-- <div class="block" style="margin-top: 12px">
        <div class="topItem">
          <chimage class="img" ></chimage>
          <div class="content">
            <div class="title">成熟洋槐蜜 500g</div>
            <div class="operation">
              <div class="pricebra">
                <div class="price">
                  9.9元
                  <div class="pricebag">3人团</div>
                </div>
                <div class="d-price">原价：19.9</div>
              </div>
              <button type="warn" @click="onInfo">去开团</button>
            </div>
          </div>
        </div>
      </div>-->

      <div class="block" style="margin-top:12px">
        <div class="grid grid-gutter group">
          <div class="grid-1-2" v-for="(item,index) in items" :key="index">
            <div class="item" @click="onInfo(item)">
              <chimage class="img" :src="item.sku_image"></chimage>
              <div class="title">{{item.goods_name}}</div>
              <div class="price">
                {{item.groupbuy_price}}
                <div class="pricebag">{{item.groupbuy_number}}人团</div>
              </div>
              <div class="d-price">单买价:{{item.retail_price}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <load-more
      v-if="!more&&!items.length"
      :show-loading="false"
      :tip="'暂无数据'"
      background-color="#fbf9fe"
    ></load-more>
  </div>
</template>

<script>
  import Mall from '../../../dll/mall'

  export default {
    name: 'group',
    data () {
      return {
        xheader: {
          title: '拼团'
        },
        items: [],
        more: true
      }
    },
    created () {
      this.getGroupList()
    },
    methods: {
      onInfo (item) {
        this.$router.push({
          name: 'mallGroupInfo',
          params: { id: item.groupbuy_id }
        })
      },
      // 获取拼团商品列表
      async getGroupList () {
        if (!this.more) {
          return
        }
        this.$vux.loading.show({
          text: '加载中'
        })
        let res = await Mall.getGroupList()
        this.$vux.loading.hide()
        if (res.code == 0) {
          this.items = [].concat(this.items, res.data.group_list || [])
          this.more = false
        } else {
          this.$vux.confirm.show({
            title: '提示',
            content: res.msg,
            showCancelButton: false,
            onConfirm: () => {
              this.$router.back()
            }
          })
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  .topItem {
    background-color: #fff;
  }

  .topItem > .content {
    padding: 16px;
  }

  .topItem > .img {
    display: block;
    height: 206px;
    width: 100%;
    background-color: #fff;
  }

  .topItem .title {
    margin-top: 16px;
    font-size: 15px;
    color: #351009;
    line-height: 21px;

  }

  .topItem .price {
    font-size: 15px;
    color: #b02910;
    line-height: 21px;
  }

  .topItem .d-price {
    margin-top: 6px;
    font-size: 13px;
    color: #d3cbc9;
    line-height: 18px;
    text-decoration: line-through;
  }

  .topItem .operation {
    display: flex;
    margin-top: 16px;
    align-items: center;
  }

  .topItem button {
    height: 40px;
    width: 86px;
    line-height: 40px;
    font-size: 14px;
  }

  .topItem .operation > .pricebra {
    flex: 1;
  }

  .pricebag {
    text-align: center;
    margin-left: 5px;
    vertical-align: middle;
    display: inline-block;
    height: 16px;
    width: 36px;
    line-height: 14px;
    font-size: 10px;
    color: #b02910;
    border: 1px solid #b02910;
    box-sizing: border-box;
  }

  .group .item {
    display: block;
    background-color: #fff;
    padding: 12px;
    box-sizing: border-box;
  }

  .group .item > .img {
    display: block;
    height: 145px;
    width: 100%;
    background-size: cover;
    background-color: #fbf8f7;
  }

  .group .item > .title {
    margin-top: 16px;
    font-size: 12px;
    color: #575757;
    line-height: 17px;
    height: 34px;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .group .item > .price {
    margin-top: 16px;
    font-size: 14px;
    color: #ae2309;
    line-height: 16px;
  }

  .group .item > .d-price {
    margin-top: 6px;
    font-size: 10px;
    color: #d3cbc9;
    line-height: 14px;
    text-decoration: line-through;
  }
</style>
